<template>
    <div class="layout-app">
		<!-- main -->
			<!-- 新增 -->
		<div class="addksFile">
			<el-dialog title="新增科室属性" :visible.sync="dialogFormVisible" width="48%" :before-close="handleAddClose" :modal="false">
				<el-divider></el-divider>
				<!-- tabs -->
				<div class="tabs">
					<div class="tabsMain">
						<!-- tabs-left -->
						<div class="tabs-left">
							<!-- 表单 -->
							<el-form ref="form" :model="addForm" :rules="rules" label-width="120px" size="mini" 
							v-loading="loading"
							element-loading-text="添加中..."
							element-loading-spinner="el-icon-loading">
								<el-row :gutter="20">
								  <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
									  <!-- input -->
									  <el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
										<el-input :suffix-icon='v.prefix' v-model="$data.addForm[v.modelValue]" placeholder="请输入内容"></el-input>
									  </el-form-item>
									  <!-- select -->
									  <el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
										<el-select v-model="$data.addForm[v.modelValue]" @focus="sname(v,i)" @change="scname" placeholder="请选择">
										  <el-option 
										    v-for="(item,index) in $data[v.op]" 
										    :key="index" 
										    :label="item.label" 
										    :value="item.value">
										    <span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span>
										  </el-option>
										</el-select>
									  </el-form-item>
								  </el-col>
								</el-row>
					
							</el-form>
						</div>
						
					</div>
				</div>
			  <div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="submitForm" :disabled="disabled">添加</el-button>
				<el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
			  </div>
			</el-dialog>
		</div>
    </div>
</template>

<script>
// self
import addksFileTabledept from './addksFileTabledept.js'
// prop

export default {
	components:{
		addksFileTabledept
	},
	data(){
		return{
			//str
			idx:'',
			value:'',
			//num
			
			//ble
			loading:false,
			disabled:false,
			dialogFormVisible:false,
			//arr
			formType:[],
			sexOptions:[{id:1,label:'男',value:'男'},{id:2,label:'女',value:'女'}],
			statusOptions:[{id:0,label:'是',value:'是'},{id:1,label:'否',value:'否'}],
			//obj
			addForm:{
				deptCode:'',  //科室编码
				status:'',  //有效状态
				deptName:'',  //科室名称
				pyCode:'',  //拼音简码
				personInCharge:'',  //负责人
				personInChargeTel:'',  //负责人电话
				specialtyName:'',  //科室专业
				physicalPosition:'',//物理位置
				returnVisitNum:'',  //返诊期限
				deptType:'',  //科室类型
				medicineType:'',  //医学类型
				remark:'',  //备注
				// 科室属性
				departmentAttribute:[]
			},
			// 科室属性
			ks:{
				attributeName: 0,//科室属性
				applyEmergency: 0,//急诊
				applyOutpatient: 0,//门诊
				applyRegister: 0, //挂号
				applyHospital: 0,//住院
			},
			rules: {
				attributeName: [
					{ required: true, message: '请选择科室属性', trigger: 'change' }
				],
				// applyEmergency: [
				// 	{ required: true, message: '请选择是否适用急诊', trigger: 'change' }
				// ],
				// applyOutpatient: [
				// 	{ required: true, message: '请选择是否适用门诊', trigger: 'change' }
				// ],
				// applyRegister: [
				// 	{ required: true, message: '请选择是否适用挂号', trigger: 'change' }
				// ],
				// applyHospital: [
				// 	{ required: true, message: '请选择是否适用住院', trigger: 'change' }
				// ]
			},
			selectKsOptions: [
			      {id: 0, label: '麻醉', value: '麻醉'},
			      {id: 1, label: '临床', value: '临床'},
			      {id: 2, label: '治疗', value: '治疗'}
			    ],
			    emeOptions: [
			      {id: 0, label: '否', value: '否'},
			      {id: 1, label: '是', value: '是'}
			    ],
			    regOptions: [
			      {id: 0, label: '否', value: '否'},
			      {id: 1, label: '是', value: '是'}
			    ],
			    OutOptions: [
			      {id: 0, label: '否', value: '否'},
			      {id: 1, label: '是', value: '是'}
			    ],
			    HosOptions: [
			      {id: 0, label: '否', value: '否'},
			      {id: 1, label: '是', value: '是'}
			    ]
		}
		
	},
	mounted() {
		// 左侧提交表单
		this.formType = addksFileTabledept.map(function(v) {
			return v
		})
	},
	methods:{
		// 键盘事件
		 handleKeyup(event) {
		  // 检查按键
		  if (event.key === 'Enter') {
			// 执行相应的动作
			console.log('Enter key was pressed');
		  }
		},
		//  select聚焦
		sname(v,i) {
			console.log(v,i);
			// v.id = i;
			this.idx = i;
			// i event
			switch (i) {
				case 1:
					// 有效状态
					console.log('id索引为1的');
					break;
			}
		},
		// 表单提交
		submitForm() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.addNewDiction();
				} else {
					return false;
				}
			});
		},
		scname(v) {
		  v.id = this.idx;
		  switch (this.idx) {
		    case 0:
		      // 科室属性
		      this.ks.attributeName = v.id; // 改为传递id
		      break;
		    case 1:
		      // 急诊
		      this.ks.applyEmergency = v.id; // 改为传递id
		      break;
		    case 2:
		      // 挂号
		      this.ks.applyRegister = v.id; // 改为传递id
		      break;
		    case 3:
		      // 门诊
		      this.ks.applyOutpatient = v.id; // 改为传递id
		      break;
		    case 4:
		      // 住院
		      this.ks.applyHospital = v.id; // 改为传递id
		      break;
		  }
		},
		// 打开model
		openModel(){
			this.dialogFormVisible = true;
		},

		//新增保存
		addNewDiction() {
			this.loading = true;
			this.disabled = true;
			
			// 准备要传递的数据
			const departmentAttribute = {
				attributeName: this.addForm.attributeName,
				applyEmergency: this.addForm.applyEmergency,
				applyRegister: this.addForm.applyRegister,
				applyOutpatient: this.addForm.applyOutpatient,
				applyHospital: this.addForm.applyHospital
			};
			
			setTimeout(() => {
				this.$emit('addksData', departmentAttribute);
				this.loading = false;
				this.$message({
					message: '科室属性已添加',
					type: 'success',
					duration: 1500,
				});
				this.disabled = false;
				this.dialogFormVisible = false;
				
				// 重置表单
				this.$refs.form.resetFields();
			}, 1500);
		},
		handleAddClose(done) {
			this.$confirm('确认关闭？')
			  .then(_ => {
				  done();
				// this.formdisabled = true;
				// location.reload();
				// done();
			  })
			  .catch(_ => {
				this.formdisabled = this.formdisabled;
			  });
		},
	},
	
}
</script>

<style lang="less" scoped>
.layout-app{
    width: 100%;
    height: 100%;
    display: flex;
	background-color: #f8f8f8;
   .addksFile{
		/deep/ .el-dialog__header{
			padding: 12px;
			background-color: #007bb0;
		}

		/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
			margin-bottom: 8px;
		}
		/deep/ .el-dialog__title{
			color: #fff;
		}
		/deep/ .el-dialog__headerbtn .el-dialog__close{
			color: #fff;
		}
		/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
			background-color: brown;
		}
		/deep/ .el-dialog__body{
			padding: 0;
		}
		/deep/ .el-divider--horizontal{
			margin: 0;
		}
		/deep/ .el-form-item__label{
			display: flex;
			justify-content: right;
			font-size: 12px;
		}
		// self
		// 选项卡
		.tabs{
			
			.tabsMain{
				display: flex;
				border: 1px solid #f4f4f4;
				.tabs-left{
					flex: 1;
					padding:12px 0 0 12px;
					border: 1px solid #e8f0ee;
					// date flex
					.autoWidth{
						width: 100%; /* 设置宽度为100% */
					}
					/deep/ .el-input__icon{
						color: brown;
					}
				}
				.tabs-right{
					flex: 1;
					padding:12px;
					margin-left: 8px;
					border: 1px solid #e8f0ee;
				}
			}
			
			
		}
	}
}
</style>